<template>
  <div class="app-container">
    <el-alert
      v-if="!hasUserId"
      title="识别用户失败!"
      type="error"
      description="没有识别出用户，请点击心理量表的查看"
      show-icon
      class="no-id-alert"
    />

    <!-- 表格 -->
    <el-table v-loading="listLoading" :data="userinfo" border fit highlight-current-row style="width: 100%">
      <!-- ID -->
      <!-- <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column> -->
      <!-- user_id -->
      <!-- <el-table-column align="center" label="用户id" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.user_id }}</span>
        </template>
      </el-table-column> -->
        <!-- user_name -->
      <el-table-column align="center" label="姓名" width="70">
        <template slot-scope="">
          <span>{{ this.listname }}</span>
        </template>
      </el-table-column>
      <!-- 第几次 -->
      <el-table-column align="center" label="时间点" width="50">
        <template slot-scope="scope">
          <span v-if="scope.row.num==1">入院</span>
          <span v-if="scope.row.num==2">出院</span>
          <span v-if="scope.row.num==3">出院两个月后</span>
        </template>
      </el-table-column>
      <!-- 应激感受量表评分 -->
      <el-table-column align="center" label="应激感受量表评分" width="140">
        <template slot-scope="scope">
          <span>
            <b>总分:</b> {{ scope.row.pss_score.total_score }}<br>
            <b>抗压等级:</b> {{ scope.row.pss_score.stress_level }}
          </span>
        </template>
      </el-table-column>
      <!-- 广泛性焦虑量表评分 -->
      <el-table-column align="center" label="广泛性焦虑量表评分" width="140">
        <template slot-scope="scope">
          <span>
            <b>总分:</b> {{ scope.row.gad_score.total_score }}<br>
            <b>严重程度:</b> {{ scope.row.gad_score.severity }}
          </span>
        </template>
      </el-table-column>
      <!-- 宾州担忧问卷 -->
      <el-table-column align="center" label="宾州担忧问卷" width="140">
        <template slot-scope="scope">
          <span>
            <b>总分:</b> {{ scope.row.pswq_score.total_score }}<br>
            <b>担忧水平:</b> {{ scope.row.pswq_score.worry_level }}
          </span>
        </template>
      </el-table-column>
      <!-- 患者健康问卷抑郁量表评分 -->
      <el-table-column align="center" label="患者健康问卷抑郁量表评分" width="140">
        <template slot-scope="scope">
          <span>
            <b>总分:</b> {{ scope.row.phq_score.total_score }}<br>
            <b>严重程度:</b> {{ scope.row.phq_score.severity }}
          </span>
        </template>
      </el-table-column>
      <!-- 反刍思维量表评分 -->
      <el-table-column align="center" label="反刍思维量表评分" width="140">
        <template slot-scope="scope">
          <span>
            <b>总分:</b> {{ scope.row.rrs_score.total_score }}<br>
            <b>症状反刍:</b> {{ scope.row.rrs_score.symptom_rumination_score }}<br>
            <b>强迫思考:</b> {{ scope.row.rrs_score.intrusive_rumination_score }}<br>
            <b>反省深思:</b> {{ scope.row.rrs_score.reflective_pondering_score }}
          </span>
        </template>
      </el-table-column>
      <!-- 前瞻回溯记忆问卷 -->
      <el-table-column align="center" label="前瞻回溯记忆问卷" width="140">
        <template slot-scope="scope">
          <span>
            <b>总分:</b> {{ scope.row.prmq_score.total_score }}<br>
            <b>前瞻性记忆:</b> {{ scope.row.prmq_score.prospective_memory_score }}<br>
            <b>回顾性记忆:</b> {{ scope.row.prmq_score.retrospective_memory_score }}
          </span>
        </template>
      </el-table-column>
      <!-- 匹兹堡睡眠质量指数 -->
      <el-table-column align="center" label="匹兹堡睡眠质量指数" width="140">
        <template slot-scope="scope">
          <span>
            <b>总分:</b> {{ scope.row.psqi_score.total_score }}<br>
            <b>睡眠质量:</b> {{ scope.row.psqi_score.sleep_quality }}
          </span>
        </template>
      </el-table-column>
      <!-- 生命质量核心量表 -->
      <el-table-column align="center" label="生命质量核心量表" width="300">
        <template slot-scope="scope">
         <!-- 111 {{scope.row.qlq_score}} -->
          <div v-if="scope.row.qlq_score!='N/A'" style="display: flex;">
            <div style="width: 50%; padding-right: 10px; border-right: 1px dashed #ccc;">
              <div><b>功能领域:</b></div>
              <b>疼痛:</b> {{ scope.row.qlq_score.domain_scores.pain }}<br>
              <b>呼吸困难:</b> {{ scope.row.qlq_score.domain_scores.dyspnea }}<br>
              <b>疲劳:</b> {{ scope.row.qlq_score.domain_scores.fatigue }}<br>
              <b>腹泻:</b> {{ scope.row.qlq_score.domain_scores.diarrhea }}<br>
              <b>失眠:</b> {{ scope.row.qlq_score.domain_scores.insomnia }}<br>
              <b>便秘:</b> {{ scope.row.qlq_score.domain_scores.constipation }}<br>
              <b>食欲减退:</b> {{ scope.row.qlq_score.domain_scores.appetite_loss }}<br>
              <b>恶心呕吐:</b> {{ scope.row.qlq_score.domain_scores.nausea_vomiting }}<br>
              <b>角色功能:</b> {{ scope.row.qlq_score.domain_scores.role_functioning }}<br>
              <b>社会功能:</b> {{ scope.row.qlq_score.domain_scores.social_functioning }}<br>
              <b>整体健康状况:</b> {{ scope.row.qlq_score.domain_scores.global_health_status }}<br>
              <b>身体功能:</b> {{ scope.row.qlq_score.domain_scores.physical_functioning }}<br>
              <b>认知功能:</b> {{ scope.row.qlq_score.domain_scores.cognitive_functioning }}<br>
              <b>情感功能:</b> {{ scope.row.qlq_score.domain_scores.emotional_functioning }}<br>
              <b>经济困难:</b> {{ scope.row.qlq_score.domain_scores.financial_difficulties }}
            </div>
            <div v-if="scope.row.qlq_score!='N/A'" style="width: 50%; padding-left: 10px;">
              <div><b>症状领域和总体健康状况领域:</b></div>
              <b>疼痛:</b> {{ scope.row.qlq_score.standard_scores.pain }}<br>
              <b>呼吸困难:</b> {{ scope.row.qlq_score.standard_scores.dyspnea }}<br>
              <b>疲劳:</b> {{ scope.row.qlq_score.standard_scores.fatigue }}<br>
              <b>腹泻:</b> {{ scope.row.qlq_score.standard_scores.diarrhea }}<br>
              <b>失眠:</b> {{ scope.row.qlq_score.standard_scores.insomnia }}<br>
              <b>便秘:</b> {{ scope.row.qlq_score.standard_scores.constipation }}<br>
              <b>食欲减退:</b> {{ scope.row.qlq_score.standard_scores.appetite_loss }}<br>
              <b>恶心呕吐:</b> {{ scope.row.qlq_score.standard_scores.nausea_vomiting }}<br>
              <b>角色功能:</b> {{ scope.row.qlq_score.standard_scores.role_functioning }}<br>
              <b>社会功能:</b> {{ scope.row.qlq_score.standard_scores.social_functioning }}<br>
              <b>整体健康状况:</b> {{ scope.row.qlq_score.standard_scores.global_health_status }}<br>
              <b>身体功能:</b> {{ scope.row.qlq_score.standard_scores.physical_functioning }}<br>
              <b>认知功能:</b> {{ scope.row.qlq_score.standard_scores.cognitive_functioning }}<br>
              <b>情感功能:</b> {{ scope.row.qlq_score.standard_scores.emotional_functioning }}<br>
              <b>经济困难:</b> {{ scope.row.qlq_score.standard_scores.financial_difficulties }}
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- 90项症状清单 -->
      <el-table-column align="center" label="90项症状清单" width="380">
        <template slot-scope="scope">
          <div style="display: flex;">
            <div style="width: 50%; padding-right: 10px; border-right: 1px dashed #ccc;">
              <b>敌对:</b> {{ scope.row.scl_score.dd }}<br>
              <b>焦虑:</b> {{ scope.row.scl_score.jl }}<br>
              <b>恐怖:</b> {{ scope.row.scl_score.kb }}<br>
              <b>偏执:</b> {{ scope.row.scl_score.pz }}<br>
              <b>抑郁:</b> {{ scope.row.scl_score.yy }}<br>
              <b>强迫症状:</b> {{ scope.row.scl_score.qpz }}<br>
              <b>躯体化分数:</b> {{ scope.row.scl_score.qth }}<br>
              <b>敌对-五类分类:</b> {{ scope.row.scl_score.ddid }}<br>
              <b>焦虑-五类分类:</b> {{ scope.row.scl_score.jlif }}<br>
              <b>精神病性:</b> {{ scope.row.scl_score.jsbx }}<br>
              <b>恐怖-五类分类:</b> {{ scope.row.scl_score.kbif }}<br>
              <b>偏执-五类分类:</b> {{ scope.row.scl_score.pzif }}<br>
              <b>其他:</b> {{ scope.row.scl_score.qita }}<br>
            </div>
            <div style="width: 50%; padding-left: 10px;">
              <b>抑郁-五类分类:</b> {{ scope.row.scl_score.yyif }}<br>
              <b>是否为阳性:</b> {{ scope.row.scl_score.ifsun }}<br>
              <b>强迫症状-五类分类:</b> {{ scope.row.scl_score.qpzif }}<br>
              <b>躯体化分数-五类分类:</b> {{ scope.row.scl_score.qthif }}<br>
              <b>精神病性-五类分类:</b> {{ scope.row.scl_score.jsbxif }}<br>
              <b>其他-五类分类:</b> {{ scope.row.scl_score.qitaif }}<br>
              <b>人际关系敏感:</b> {{ scope.row.scl_score.rjgxmg }}<br>
              <b>阳性症状均分:</b> {{ scope.row.scl_score.yxzzjf }}<br>
              <b>总分:</b> {{ scope.row.scl_score.allscore }}<br>
              <b>人际关系敏感-五类分类:</b> {{ scope.row.scl_score.rjgxmgif }}<br>
              <b>阳性项目数:</b> {{ scope.row.scl_score.sunproject }}<br>
              <b>总均分:</b> {{ scope.row.scl_score.allscorejun }}<br>
              <b>阴性项目数:</b> {{ scope.row.scl_score.moonproject }}
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- 创建时间 -->
      <el-table-column align="center" label="创建时间" width="140">
        <template slot-scope="scope">
          <span>{{ formatDate(scope.row.create_time) }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import { numInfoPsychological } from '@/api/nurse/psychological_list';
import Pagination from '@/components/Pagination';

export default {
  name: 'numInfoPsychological',
  components: { Pagination },
  data() {
    return {
      listname:"",
      userinfo: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      hasUserId: true
    }
  },
  created() {
    this.getList();
    this.listname=this.$route.query.name
  },
  methods: {
    getList() {
      const userId = this.$route.query.id;
      if (!userId) {
        this.hasUserId = false;
        this.listLoading = false;
        return;
      }

      console.log("user_id", userId);
      this.listLoading = true;

      const queryParams = {
        ...this.listQuery,
        user_id: userId
      };

      numInfoPsychological(queryParams)
        .then(response => {
          const filteredData = response.data.userinfo;
          this.total = response.data.total;
          this.userinfo = filteredData.map(item => {
            function parseScore(score) {
              try {
                return typeof score === 'string' ? JSON.parse(score) : score || "N/A";
              } catch {
                return "N/A";
              }
            }

            return {
              id: item[0],
              user_id: item[1],
              pss_score: parseScore(item[3]),
              gad_score: parseScore(item[5]),
              pswq_score: parseScore(item[7]),
              phq_score: parseScore(item[9]),
              rrs_score: parseScore(item[11]),
              prmq_score: parseScore(item[13]),
              qlq_score: parseScore(item[15]),
              psqi_score: parseScore(item[17]),
              scl_score: parseScore(item[19]),
              create_time: item[20],
              num: item[21]
            };
          });
          this.listLoading = false;
        })
        .catch(error => {
          console.error('Failed to fetch data:', error);
          this.listLoading = false;
        });
    },

    formatDate(date) {
      const d = new Date(date);
      return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
    }
  }
}
</script>

<style scoped>
::v-deep .no-id-alert .el-alert__title {
  font-size: 24px;
}

::v-deep .no-id-alert .el-alert__description {
  font-size: 18px;
}

.no-id-alert {
  margin-bottom: 20px;
}
</style>
